<template>

  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" @click="addFriend = true">
        添加朋友
      </el-button>
    </div>
    <h2>朋友列表</h2>

    <el-table :data="friendList" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="朋友id" width="100">
        <template slot-scope="{row}">
          <span>{{ row.friendId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="friendName" label="朋友名称" width="150">
        <template slot-scope="{row}">
          <span>{{ row.friendName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="seeMore(row)">
            查看他的拼单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap.buy" :visible.sync="seePindan" width="75%">
      <el-table :data="orderList" class="data_table" style="width: 100%;">
        <el-table-column prop="name" label="拼单商店" width="100">
          <template slot-scope="{row}">
            <span>{{ row.store.storeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="拼单物品名称" width="150">
          <template slot-scope="{row}">
            <span>{{ row.good.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goods" label="拼单物品类型" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.goodType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="拼单物品数量" width="80">
          <template slot-scope="{row}">
            <span>{{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="拼单价格（个人）" width="80">
          <template slot-scope="{row}">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="拼单人数" width="80">
          <template slot-scope="{row}">
            <span>{{ row.nowNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="拼单进度" width="80">
          <template slot-scope="{row}">
            <span>{{ row.nowGoodNumber }} / {{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="截至日期" width="250">
          <template slot-scope="{row}">
            <el-date-picker ref="date" type="datetime" v-model="row.end_time" readonly />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="拼单状态" width="80">
          <template slot-scope="{row}">
            <span>{{ row.fightOrderState }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
          <template slot-scope="{row}">
            <el-button v-waves class="filter-item" type="primary" :disabled="row.fightOrderState != 'ORDER_DISPLAY'" @click="seePindanDetail(row)">
              查看拼单详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="seePindan = false">
          返回
        </el-button>
      </div>
    </el-dialog>

    <!--查看拼单详情界面-->
    <el-dialog title="拼单详情" :visible.sync="seePindanVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="拼单发起者" prop="id">
          <el-input v-model="temp.userName" readonly />
        </el-form-item>
        <el-form-item label="拼单门店" prop="store">
          <el-input v-model="temp.storeName"  readonly />
        </el-form-item>
        <el-form-item label="拼单商品" prop="good">
          <el-input v-model="temp.goodName" readonly />
        </el-form-item>
        <el-form-item label="拼单商品进度" prop="schedule">
          <el-input v-model="temp.schedule" readonly />
        </el-form-item>
        <el-form-item label="拼单价格（单价）" prop="price">
          <el-input v-model="temp.price" readonly />
        </el-form-item>
        <el-form-item label="拼单数量" prop="number">
          <el-input v-model="temp.number" type="number" :placeholder="'剩余拼单商品数量：' + temp.leftNumber"/>
        </el-form-item>
        <el-form-item label="截止日期" prop="type">
          <el-date-picker ref="date" type="datetime" v-model="temp.endTime" readonly />
        </el-form-item>
        <el-form-item label="拼单状态" prop="type">
          <el-input v-model="temp.status" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seePindanVisible = false">
          返回
        </el-button>
        <el-button @click="paticipy">
          参与拼单
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="textMap.add" :visible.sync="addFriend">
      <el-form ref="dataFormsee" :rules="rules" :model="fr" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="姓名" prop="shopName">
          <el-input v-model="fr.name"/>
        </el-form-item>
      </el-form>
      <el-button @click="addFriend = false">
        返回
      </el-button>
      <el-button @click=addFr()>
        添加朋友
      </el-button>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  import request from '@/utils/request'
  export default {
    // 朋友列表
    name: 'friend',
    data () {
      return {
        userId: 0,
        userName: '',
        friendList: [], // 朋友列表
        orderList: [], //朋友的所有拼单信息
        seePindan: false,
        textMap: {
          buy: '朋友拼单',
          add: '添加朋友'
        },
        addFriend: false,
        fr:{
          name: ''
        },
        seePindanVisible: false,
        temp: {
          id: null,
          userName: null,
          storeName: null,
          goodName: null,
          schedule: null,
          leftNumber: null,
          price: null,
          number: null,
          endTime: null,
          status: null
        }
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.seePindan = false
        this.addFriend = false
        this.userId = JSON.parse(sessionStorage.getItem('user')).userId
        this.userName = JSON.parse(sessionStorage.getItem('user')).userName
        request.get("/friend/getFriendByid/" + this.userId).then(response => {
          var Data = response.data
          if (Data.code == 200){
            // console.log(Data.data)
            // this.seePindan = true
            this.friendList = Data.data
            this.friendList.forEach(item =>{
              request.get("/user/getuserByid/" + item.friendId ).then(re => {
                console.log(re.data)
                if (re.data.code == 200){
                  Vue.set(item,'friendName',re.data.data.userName)
                }
              })
            })
          }
        })
      },
      seeMore(row){
        this.seePindan = true
        request.get("/fightorder/getUserOrder1/"+row.friendId).then(request => {
          var Data=request.data // PFResponse
          if (Data.code == 200){
            this.orderList = Data.data
          }
        })
      },
      seePindanDetail(row) {
        this.temp.id = row.id
        this.temp.userName = row.userName
        this.temp.storeName = row.store.storeName
        this.temp.goodName = row.good.goodName
        this.temp.schedule = row.nowGoodNumber + "/" + row.goodNumber
        this.temp.leftNumber = row.goodNumber - row.nowGoodNumber
        this.temp.price = row.price
        this.temp.endTime = row.end_time
        this.temp.status = row.fightOrderState

        this.seePindanVisible = true
      },
      paticipy(row) {
        if (this.temp.number==null) {
          this.$message.warning("请输入拼单数量！")
          return
        } else if(this.temp.number>this.temp.leftNumber) {
          this.$message.warning("拼单数量超出上限，请重新输入")
          return
        }

        request.get("/fightorder/join/"+ this.temp.id+"/"+ this.userName + "/" + this.temp.number ).then(request => {
          var Data=request.data // PFResponse
          if (Data.code == 200){
            // 拼单成功，可以在我参与的拼单里面进行查看
            this.$message.success(Data.message)
            this.seePindanVisible = false
            this.init()
          } else {
            this.$message.warning(Data.message)
            this.init()
          }
        })
      },
      addFr(){
        request.get("/user/checkuserName/"+this.fr.name).then(response => {
          var Data = response.data
          if (Data.ifExit){
            var getUser = Data.data // user 类
            request.post("/friend/addfriend",{
              userId: this.userId,
              friendId: getUser.userId,
              friendState: 'WAIT'
            }).then(re => {
              var result = re.data
              if (result.code == 200){
                this.$message.success(result.message)
                this.addFriend = false
                this.init()
              }
            })
          } else {
            this.$message.warning(Data.message+", 请重新输入")
            this.fr.name = ''
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
